<template>
  <view class="personalCenter">
    <view class="goBack" @click="goBack" :style="{height: `${globalData.navBarHeight}px`}">
      <image src="../../static/images/goBack.png" mode=""></image>
    </view>
    <view class="center-banner" :style="{paddingTop: `${globalData.navBarHeight}px`}">
      <view class="center-banner-avatar">
        <image :src="avatarUrl" mode=""></image>
      </view>
      <view class="center-banner-info">
        <view class="center-banner-name">
          <!-- 小王保持好心情 -->
          {{ nickname }}
        </view>
        <view class="center-banner-mobile" v-if="mobile">
          {{ mobile }}
        </view>
      </view>
    </view>
    <view class="center-info">
      <van-cell v-for="(item, index) in menuData" :key="index" is-link :border="false" @click="uptoPath(item)">
        <view slot="title" class="menu-info">
          <image :src="item.icon" mode=""></image>
          <text>{{ item.name }}</text>
        </view>
        <view class="right-text">
          <text v-if="item.hasDeposit && hasDepositState">已缴纳</text>
        </view>
      </van-cell>
    </view>
    <view class="center-rule">
      《服务条款》 | 《隐私政策》
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    hasToken
  } from '@/utils/token.js'
  import {
    hasDeposit
  } from '@/api/order'
  export default {
    data() {
      return {
        globalData: {
          navBarHeight: 0, // 导航栏高度
          menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
          menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
          menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
        },
        nickname: '未登录',
        mobile: '',
        hasDepositState: Boolean,
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        menuData: [{
            name: '押金',
            icon: require('@/static/images/deposit.png'),
            hasDeposit: true,
            path: '/subpkg/deposit/index'
          },
          {
            name: '我的订单',
            icon: require('@/static/images/myorder.png'),
            path: '/subpkg/myOrder/index'
          },
          {
            name: '我的优惠券',
            icon: require('@/static/images/coupon.png'),
            path: '/subpkg/coupon/index'
          },
          {
            name: '联系客服',
            icon: require('@/static/images/kefu.png')
          },
          {
            name: '合作申请',
            icon: require('@/static/images/hezuo.png'),
            path: '/subpkg/cooperation/index'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'token'])
    },
    watch: {
      userInfo(newVal) {
        if (newVal) {
          this.getUserInfo()
        }
      },
      immediate: true,
      deep: true
    },
    onLoad() {
      this.getInitLogoHeight()
      if (!hasToken()) {
        if (this.$refs['showSheet']) this.$refs['showSheet'].showSheet = true
      }
    },
    onShow() {
      this.getUserInfo()
      this.hasDeposit()
    },
    methods: {
      async hasDeposit() {
        if (hasToken()) {
          const {
            data
          } = await hasDeposit({})
          this.hasDepositState = data
        }
      },
      getUserInfo() {
        if (this.userInfo && Object.keys(this.userInfo).length > 0) {
          this.$nextTick(() => {
            this.avatarUrl = this.userInfo.avatar
            this.nickname = this.userInfo.nickName
            this.mobile = this.userInfo.phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          })
        }
      },
      onChooseAvatar(e) {
        const {
          avatarUrl
        } = e.detail
        this.avatarUrl = avatarUrl
      },
      onChooseName(e) {
        console.log(e.detail.value);
      },
      getInitLogoHeight() {
        const that = this;
        // 获取系统信息
        const systemInfo = wx.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏高度 + 44
        that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuTop = menuButtonInfo.top;
        that.globalData.menuHeight = menuButtonInfo.height;
      },
      goBack() {
        uni.navigateBack()
      },
      uptoPath(item) {
        if (!hasToken()) {
          if (this.$refs['showSheet']) this.$refs['showSheet'].showSheet = true
          return
        }
        if (item.path) {
          uni.navigateTo({
            url: item.path
          })
        }

      }
    }
  }
</script>

<style lang="less" scoped>
  .personalCenter {
    .cell-title {
      flex: 0.3 !important;
    }

    .goBack {
      position: fixed;
      display: flex;
      align-items: flex-end;
      padding-left: 15px;
      padding-bottom: 8px;
      box-sizing: border-box;

      image {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }
    }

    .center-banner {
      width: 100%;
      height: 210px;
      background: url(../../static/images/PersonCenterBanner.png) 0 0 no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 30px;
      color: #fff;
      padding-left: 15px;

      .center-banner-avatar {
        width: 60px;
        height: 60px;
        padding: unset;
        background-color: #ccc;
        border: 2px solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .center-banner-info {
        display: flex;
        flex-direction: column;
        margin-left: 15px;

        .center-banner-mobile {
          margin-top: 10px;
        }
      }
    }

    .center-info {
      margin-top: -15px;
      background-color: #FFFFFF;
      border-radius: 15px;
      overflow: hidden;

      ::v-deep .van-cell {
        padding: 20px;
      }

      .menu-info {
        display: flex;
        align-items: center;

        image {
          width: 26px;
          height: 26px;
        }

        text {
          margin-left: 10px;
        }
      }

      .right-text {
        color: #105BDE;
        font-size: 15px;
      }
    }

    .center-rule {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 80rpx;
      display: flex;
      justify-content: center;
      font-size: 25rpx;
      color: #7E7E7E;
    }
  }
</style>
